<template>
  <div>
    <RePage>
      <MyFormCreate :clear-event="getTableList" v-model="searchFrom" :rule="searchFormRules" :key="key">
        <template #field-productId="scope">
          <!-- <el-form-item> -->
          <el-select clearable @clear="getTableList" v-model="searchFrom.productId" placeholder="请选择产品名称"
            @change="v => scope.data.model.callback(v)">
            <el-option v-for="item in productTypes" :key="item.productId" :label="item.productName"
              :value="item.productId"></el-option>
          </el-select>
          <!-- </el-form-item> -->
        </template>
        <el-button type="primary" @click="DebounceGetTableList">搜索</el-button>
        <sj-button custom-type="sinfo" @click="DebounceResetting">重置</sj-button>
      </MyFormCreate>
      <div>
        <el-button v-auth="'business.task.create'" type="primary" :icon="Plus" @click="add"
          :disabled="!operate.checkedProject">添加</el-button>
        <el-button v-auth="'business.task.remove'" type="danger" :disabled="!selectionData.length"
          @click="deletes()">批量删除</el-button>
      </div>
      <pure-table class="mt-5" :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)" showOverflowTooltip border
        @selection-change="selectionChange" :isShowPag="false">
        <template #cycle="{ row }">
          {{ isNullOrEmpty( PERIODUNITTEXT[row.cycle]?.label ) }}
        </template>
        <template #status="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'danger'">
            {{ isNullOrEmpty( STRATEGYSTATUSTEXT[row.status]?.label ) }}
          </el-tag>
        </template>
        <template #deviceIds="{ row }">
          <sj-link :disabled="!haveRole('business.task.deviceList')" custom-type="sblue" :underline="false"
            @click="opendrawset(row)">
            管理({{ isNullOrEmpty( row.deviceIds == null ? 0 : row.deviceIds.length ) }})
          </sj-link>
        </template>
        <template #action="{ row }">
          <el-space>
            <!-- <sj-link custom-type="sblue" :underline="false" @click="info(row)"
              >查看</sj-link
            > -->
            <sj-link v-auth="'business.task.update'" custom-type="sblue" :underline="false"
              @click="edit(row)">编辑</sj-link>
            <sj-link v-auth="'business.task.remove'" custom-type="sred" :underline="false"
              @click="deletes(row)">删除</sj-link>
          </el-space>
        </template>
      </pure-table>
      <div class="mt-5">
        <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
          :layout="PAGE_LAYOUT" :total="tableData.total" @size-change="getTableList" @current-change="getTableList" />
      </div>
    </RePage>
  </div>
</template>
<script lang="ts" setup>
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import {
  STRATEGYSTATUS,
  STRATEGYSTATUSTEXT
} from "@/constant/device-mangenment";
import {
  usePageVariablesStoreHook,
} from "@/store/modules/pageVariables";
const operate = usePageVariablesStoreHook().getOperate();
import { getProductType } from "@/api/operate/alarm-management/alarm-log/index";
import { PERIODUNITTEXT } from "@/constant/dayly-inspection";
import MyFormCreate from "@/components/MyFormCreate/index.vue";
import RePage from "@/components/RePage/index.vue";
import ReTable from "@/components/ReTable/index.vue";
import editForm from "./form.vue";
import infos from "./info.vue";
import { reactive, ref, h } from "vue";
import { PAGE_LAYOUT } from "@/constant";
import { Plus, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import setdraw from "./setdraw.vue";
import { haveRole } from '@/utils/functions'
import {
  getList,
  getInfo,
  addInfo,
  editInfo,
  deleteInfo,
  taskdevice
} from "@/api/operate/timed-tasks/index";
import { titles, defaultSearchForm, prompt, defaultInfoForm } from "./index";
import { addDialog } from "@/components/ReDialog";
import {
  cloneDeep,
  isAllEmpty,
  deviceDetection,
  debounce
} from "@pureadmin/utils";
import { message } from "@/utils/message";
import { customDebounce, customPromiseDebounce } from "@/utils/functions";
const productTypes = ref([]);
const searchFrom = ref(defaultSearchForm());
const key = ref(0);
const showInfo = ref();
const formRef = ref();
const tableData = reactive({
  data: [],
  total: 0
});

const searchFormRules = [
  {
    type: "input",
    field: "taskName",
    title: titles.taskName,
    value: null,
    props: {
      placeholder: prompt.taskName,
      clearable: true
    }
  },
  {
    type: "fieldComponent",
    field: "productId",
    title: "产品类型",
    value: null,
    options: productTypes,
    props: {
      placeholder: prompt.taskName,
      clearable: true
    }
  },
  {
    type: "select",
    field: "status",
    title: titles.status,
    value: null,
    options: STRATEGYSTATUS,
    props: {
      placeholder: prompt.status,
      clearable: true
    }
  },

  { type: "number", field: "page", title: "page", hidden: true },
  { type: "number", field: "limit", title: "limit", hidden: true }
];
const selectionData = ref([]);
const roleTableConfig = [
  { type: "selection", align: "left", fixed: 'left' },
  { prop: "id", label: titles.id, width:  100, fixed: 'left' },
  { prop: "unityName", label: titles.unityName, width: 120 },
  { prop: "projectName", label: titles.projectName, minWidth: 120 },
  { prop: "productName", label: "产品类型", minWidth: 120 },
  { prop: "taskName", label: titles.taskName, minWidth: 120 },
  { slot: "status", label: titles.status, minWidth: 90 },
  { slot: "cycle", label: titles.cycle, minWidth: 90 },
  { slot: "deviceIds", label: titles.deviceIds, minWidth: 120 },
  { slot: "action", label: titles.action, width: 100, fixed: "right" }
];
//设置弹窗
const setdrawprop = ref(false);
onMounted(() => {
  getTableList();
});
getProductType().then(res => {
  if (res.code === 200) {
    productTypes.value = res.result;
    key.value++;
  }
});
// 获取列表数据
const getTableList = () => {
  getList(searchFrom.value).then(res => {
    if (res.code === 200) {
      tableData.data = res.result.data;
      tableData.total = res.result.total;
    }
  });
};
// 重置搜索栏
const resetting = () => {
  //点击重置按键
  Object.assign(searchFrom.value, defaultSearchForm());
  key.value++;
  getTableList();
};
//打开设置弹窗
const opendrawset = (row) => {
  setdrawprop.value = true;
  addDialog({
    title: `设备管理`,
    width: "1100px",
    draggable: true,
    hideFooter: true,
    fullscreen: deviceDetection(),
    props: {
      id: row.id,
      getTableList: getTableList,
      projectId:row.projectId,
    },
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(setdraw, { ref: formRef }),
    openAutoFocus({ options, index }) {
      options.props = {
        isLoading: true,
        id: row.id,
        projectId:row.projectId,
        getTableList: getTableList,
        formInline: defaultInfoForm()
      };
    }
  });
};
// 详情
const info = row => {
  addDialog({
    title: `详情`,
    hideFooter: true,
    width: "800px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(infos, { ref: formRef }),
    openAutoFocus({ options, index }) {
      options.props = {
        isLoading: true,
        formInline: defaultInfoForm()
      };
      getInfo({ id: row.id })
        .then(res => {
          if (res.code == 200) {
            showInfo.value = res.result;
            options.props.formInline = res.result;
          }
        })
        .finally(() => {
          options.props.isLoading = false;
        });
    }
  });
};
// 新增
const add = row => {
  showInfo.value = {};
  openDialog();
};
// 编辑
const edit = row => {
  showInfo.value = {};
  openDialog("编辑", row);
};
// 删除
const deletes = (row?) => {
  ElMessageBox.confirm(`确认删除${row ? "当前" : "选中的"}数据?`, "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteInfo({
      ids: row ? [row.id] : selectionData.value.map(item => item.id)
    }).then(res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
        getTableList();
      }
    });
  });
};
// 开启弹窗
const openDialog = (title = "新增", row?: any) => {
  addDialog({
    title: `${title}`,
    width: "900px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(editForm, { ref: formRef }),
    openAutoFocus({ options, index }) {
      if (row) {
        options.props = {
          isLoading: true,
          formInline: defaultInfoForm()
        };
        getInfo({ id: row.id })
          .then(res => {
            if (res.code == 200) {
              showInfo.value = res.result;
              options.props.formInline = res.result;
            }
          })
          .finally(() => {
            options.props.isLoading = false;
          });
      } else {
        options.props = {
          isLoading: false,
          formInline: defaultInfoForm()
        };
      }
    },
    beforeSure: (done, { options }) => {
      const FormRef = formRef.value.getRef();
      const formData = options.props.formInline;
      function chores() {
        message(`操作成功`, {
          type: "success"
        });
        done(); // 关闭弹框
        getTableList(); // 刷新表格数据
      }
      FormRef.validate(valid => {
        if (valid && !options.props?.isLoading) {
          // console.log("formData", formData);
          // 表单规则校验通过
          options.props.isLoading = true;
          if (title === "新增") {
            DebounceAddInfo({ ...formData, projectId: operate.checkedProject })
              .then(res => {
                if (res.code == 200) {
                  chores();
                }
                options.props.isLoading = false;
              })
              .catch(err => {
                if (err !== "请求中") {
                  options.props.isLoading = false;
                }
              });
          } else {
            DebounceEditInfo(formData)
              .then(res => {
                if (res.code == 200) {
                  chores();
                }
                options.props.isLoading = false;
              })
              .catch(err => {
                if (err !== "请求中") {
                  options.props.isLoading = false;
                }
              });
          }
        }
      });
    }
  });
};
const selectionChange = data => {
  selectionData.value = data;
};
// 获取列表
const DebounceGetTableList = debounce(getTableList, 1000, true);
// 重置
const DebounceResetting = debounce(resetting, 1000, true);
// 添加请求
const DebounceAddInfo = customPromiseDebounce(addInfo, 1000, true);
// 编辑请求
const DebounceEditInfo = customPromiseDebounce(editInfo, 1000, true);
</script>
<style lang="scss" scoped></style>
